<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>选课</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/style.css">
    <script src="${pageContext.request.contextPath}/layui/js/jquery-1.11.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
    <script src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
</head>
<body>


<%------------------------------课程列表--------------------------------%>
<%------------------------------课程列表--------------------------------%>
<%------------------------------课程列表--------------------------------%>
<script type="text/html" id="xuekebtn">
    <%--未选课--%>
    <div class="ok">
        <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="xuanke" id="xuanke">选课</a>
    </div>
    <%--已选课--%>
    <div class="no">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="yixuan" id="yixuan">取消选课</a>
    </div>

</script>


<div class="layui-main layui-bg-gray" align="center">
    <table id="coures" lay-filter="cou" class="layui-bg-green" align="left"></table><%--课程表格--%>
</div>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<script>

    var $ = null;
    layui.use(["jquery", "upload", "form", "table", "layer", "element", "laydate"], function () {
        $ = layui.jquery;
        table = layui.table;

        table.render({
            elem: "#coures",
            toolbar:'',
            totalRow: true,
            skin: 'line', //行边框风格
            url: "${pageContext.request.contextPath}/ss/",
            page: true, //开启分页
            request: {
                /* pageName: 'page' //页码的参数名称，默认：page
                 , limitName: 'size' //每页数据量的参数名，默认：limit*/
            }
            , response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'totalCount' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,
            cols: [[
                {type: 'checkbox', fixed: 'center'},
                {field: "couid", title: '课程编号', align: 'center', width: 130},
                {field: "couname", width: 130, title: "课程名称", align: "center"},
                {title: "操作", width: 282, align: "center", toolbar: "#xuekebtn"},
            ]]
            , id: 'stuTable',
            done: function (res, curr, count) {
                $("[data-field='id']").remove();
            },
            limit: 10,
        });



            /*选课按钮事件*/
            table.on("tool(cou)", function (obj) {
                var data = obj.data;

                if (obj.event === 'xuanke') {   //选课
                    console.log(data)
                    $.ajax({
                        type: "get",
                        url: "${pageContext.request.contextPath}/ss/stuPickCou.html",
                        contentType: "application/json",
                        data:{
                            cid: data.couid
                        },
                        success:function (data) {

                            console.log(data)

                            if(!data){  //true
                                $(".ok").css("display","none");
                            }else if (data){
                                $(".no").css("display","block");
                            }
/*
                            console.log(data)
                            if(result>0){
                                layer.msg("已选课",{icon:1});
                                $(".form_hidden .form_conent").find("input").val("");
                                location.reload(true);//刷新当前页面

                                table.reload('stuTable', {//执行重载
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                    , where: {
                                        cid: data.couid
                                    }
                                });


                            }else{
                                layer.msg("不能重复选课",{icon:2});
                            }*/
                        },
                        error:function(){

                            layer.msg("不能重复选课",{icon:2});
                            $(".form_hidden .form_conent").find("input").val("");
                        },

                        done: function(res, curr, count){
                            //如果是异步请求数据方式，res即为你接口返回的信息。
                            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                            console.log(res);

                            //得到当前页码
                            console.log(curr);

                            //得到数据总量
                            console.log(count);
                        }
                    });



                }else if (obj.event === 'yixuan'){//已选




                    console.log(data)
                }else if (obj.event === 'tuike'){//退课
                    console.log(data)
                    layer.confirm('真的要退课么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });

                }
               // element.init();  什么意思，自己查

            });






    });




</script>

</body>
</html>